import React, { useState } from 'react';
import { Tag, Button, message } from 'antd';

// 自定义input输入框，支持中英文逗号

function index() {
  const [value, setValue] = useState('');
  const [tag, setTags] = useState([]);

  const handleChange = (e) => {
    setValue(e.target.value);
  };
  const remove = (key) => {
    setTags(tag.filter((item) => item.key !== key));
    console.log(key);
  };
  const addTag = () => {
    let aaa = value.replace('，', ',').split(',');
    aaa = aaa.map((item) => {
      return { title: item, key: new Date() };
    });
    console.log(aaa);

    if (tag.length === 500) {
      message.warning('总关键字最多500个');
    } else {
      setTags([...tag, ...aaa]);
    }
  };
  return (
    <div>
      <input
        defaultValue={value}
        onChange={handleChange}
        placeholder="输入关键词，以逗号分隔"
      />
      <Button onClick={addTag}>增加</Button>
      <div>
        已输入{tag.length}项，还可以输入{500 - tag.length}项
      </div>

      {tag.map((item) => (
        <div key={item.value}>
          <Tag>{item.title}</Tag>
          <Button type="danger" size="small" onClick={() => remove(item.key)}>
            删除
          </Button>
        </div>
      ))}
    </div>
  );
}
export default index;
